<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!-- Header -->
<header data-am-widget="header"
	class="am-header am-header-default am-header-fixed">
	<div class="am-header-left am-header-nav">
		<a id="window-back" href="javascript:void(0)" data-am-offcanvas> <i
			class="am-icon-chevron-left"></i>
		</a>
	</div>
	<h1 class="am-header-title">${modelName}</h1>
	<div class="am-header-right am-header-nav">
		<a id="searchIcon" href="javascript:void(0)"
			data-am-collapse="{target: '#filterDiv'}"> <i
			class="am-header-icon am-icon-filter"></i>
		</a>
	</div>
</header>

<!-- filter box-->
<div id="filterDiv" class="am-g am-collapse">

</div>

<div id="prodContainor" class="am-g">
</div>

<script type="text/javascript">
	
	var selectedFilterMap = {};
	var products=[];
	$(function() {
		getProductsByModel();
		$('.product').live('click',function(){
			var productCode = $(this).attr('productCode');
			var modelId = '${modelId}';
			var modelName='${modelName}';
			var category = '${category}';
			location.href = "mobile/selection/product?productCode=" + encodeURI(encodeURI(productCode))+'&modelId='+modelId
					+'&modelName='+encodeURI(encodeURI(modelName))+'&category='+encodeURI(encodeURI(category));
		});
		
	});

	function getProductsByModel() {
		var modelId = '${modelId}';
		$.post('models/' + modelId + '/products', {
			category : '${category}'
		}, function(result) {
			if (result.code == 'ACK') {
				products = result.data.products;
				constructFilterSelect(result.data.map);
				showProducts();
			}
		}, 'json');
	}
	
	function constructFilterSelect(map){
		var $filterDiv = $('#filterDiv');
		$.each(map, function(i, filterArr) {
			var selectComp = '<select categoryNumber="'+i+'">';
			selectComp += '<option value="'+-1+'">请选择</option>';
			$.each(filterArr, function(i, filterOption) {
				selectComp += '<option value="'+filterOption.id+'">'
						+ filterOption.name + '</option>';
			});
			selectComp += '</select>';
			$filterDiv.append(selectComp);
		});
		$('select').selected({
			btnWidth : '100%',
			btnSize: 'sm',
			maxHeight: '100px',
		});
		//$("select[categoryNumber!='1'] + div button:first-child").attr('disabled','true');
		$('select').on('change', function() {
			var value = $(this).val();
			var categoryNumber = $(this).attr('categoryNumber');
			selectedFilterMap[categoryNumber] = value;
			filterProducts();
		  });
	}
	
	function showProducts(){
		var $prodContainor = $('#prodContainor');
		$prodContainor.empty();
		$.each(products, function(i, prod) {
			$prodContainor.append(constructProduct(prod));
		});
	}
	
	function filterProducts(){
		var $prodContainor = $('#prodContainor');
		$prodContainor.empty();
		$.each(products, function(i, prod) {
			var isMatch=true;
			$.each(prod.features, function(i, feature) {
				if(selectedFilterMap[feature.categoryNumber]!=-1 && selectedFilterMap[feature.categoryNumber]!= feature.id){
					isMatch = false;
					return;
				}
			});
			for(var key in selectedFilterMap){
				var isFound=false;
				$.each(prod.features, function(i, feature) {
					if(feature.categoryNumber==key){
						isFound=true;
						return;
					}
				});
				if(!isFound){
					if(selectedFilterMap[key]!=-1){
						isMatch=false;
					}
				}
			}
			if(isMatch){
				$prodContainor.append(constructProduct(prod));
			}
		}); 
		animation($prodContainor,
				[ 'am-animation-scale-down' ]);
	}
	
	function constructProduct(prod){
		var productFragment = '<div class="am-thumbnail product" productCode="'+prod.code+'">'
		+'<img src="files'+(prod.mobileIntroPic==null?"/":prod.mobileIntroPic.resId)+'" alt="" style="width: 100%;"/>'
		+'<div class="am-thumbnail-caption"><p>'
		+'编号：<span class="am-badge am-badge-warning am-radius">'+prod.code+'</span>'
		+'参考年份：<span class="am-badge am-badge-default am-radius">'+prod.modelYear+'</span></p>'
		+'<ul class="am-list am-list-static">';
		$.each(prod.features, function(i, feature) {
			productFragment+='<li>'+feature.categoryNumber+' - '+feature.name+'</li>'
		});
		productFragment+='</ul></div></div>';
		return productFragment;
	}
	
</script>